<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>属性与class绑定</title>

<style media="screen">
p {
color: blue;
}


.color-blue {
background: blue;
}

.color-red {
background: red;
}

</style>

</head>


<body>


<div id="root">
<!---->
<p>绑定固定变量 双括号里面可以插入js语句处理</p>
  <h3>  {{  message.split('').reverse().join('') }} </h3>

<!---->
 <p>计算属性</p>

  <h3>  {{  reversemessage }} </h3>

<!---->
  <p>加载选中的人</p>

<ul>
    <li v-for="member in members" v-if="member.selected" v-text="member.name"> </li>

</ul>


<!---->
    <p>加载选中的人,使用计算属性写法</p>

    <ul>
        <li v-for="member in selectedMembers" v-text="member.name"> </li>

    </ul>



</div>





<!-- vue -->
<!-- <script src="https://unpkg.com/vue@2.4.2"></script> -->
<script src="./js/vue2.4.2.js"></script>




<script >


//使用vue绑定 ， 注意 Vue 的 V大写
var app = new Vue({
 el: '#root',
 data : {
 message: 'hello world',
 members : [
         { name: 'hament'  , selected:true },
         { name: 'Tim'  , selected:true },
         { name: 'tom'  , selected:false },
         { name: 'Mary'  , selected:false },
         { name: 'Joy'  , selected:false },
         { name: 'Jay'  , selected:false }
         ]

 },


    //计算属性
    computed: {

        reversemessage() {

            return this.message.split('').reverse().join('') ;

        },


       //选中的会员
        selectedMembers () {

            //ES6语法
           //let smarr =  this.members.filter( member => member.selected)

            //
           let smarr2 =  this.members.filter(function (member) {
               return  member.selected
           })

            return smarr2;

        }


    },




//函数之间需要有 , 隔开
 methods: {
 

}





});


</script>


  </body>
</html>
